<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <title>数据字典</title>
    <link rel="stylesheet" href="/css/editormd.css"/>
    <link rel="stylesheet" href="/css/editormd.preview.css"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-select.css"/>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/popper.js"></script>
    <script src="/js/editormd.min.js"></script>
    <script src="/js/marked.min.js"></script>
    <script src="/js/prettify.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-select.js"></script>
</head>
<body>
<hr>
<div class="form-group" style="padding-left: 10px">
    <label class="control-label" for="DatabaseName">数据库名称:</label>
    <select id="DatabaseName" class="selectpicker" data-live-search="true"></select>
</div>
<hr>
<!--<div>-->
<!--    <span>数据库：</span>-->
<!--    <select id="DatabaseName"></select>-->
<!--</div>-->

<div id="markdown-view">
    <textarea id="markdown" style="display:none;" th:text="${markdown}"></textarea>
</div>
<!-- Editor markdown转html -->
<script type="text/javascript">
    window.onload = function () {
        var ip = sessionStorage.getItem("ip");
        var port = sessionStorage.getItem("port");
        var database = sessionStorage.getItem("database");
        var username = sessionStorage.getItem("username");
        var password = sessionStorage.getItem("password");
        var selector = sessionStorage.getItem("selector");

        var data = {}
        data.ip = ip;
        data.port = port;
        data.database = database;
        data.username = username;
        data.password = password;
        data.selector = selector;
        console.info(data);
        var url = "/getDataBaseNameList";

        $.post(url, data, function (result) {
            $.each(result, function (i) {
                $("#DatabaseName").append("<option value =" + result[i] + ">" + result[i] + "</option>")
            })
            $("#DatabaseName").find("option[value='" + database + "']").attr("selected", true);
            //回显
            $("#DatabaseName").selectpicker("refresh");
            $("#DatabaseName").selectpicker('render');
        });
    }

    $("#DatabaseName").bind("change", function () {

        var ip = sessionStorage.getItem("ip");
        var port = sessionStorage.getItem("port");
        var database = $("#DatabaseName").val()
        sessionStorage.setItem("database", database);
        var username = sessionStorage.getItem("username");
        var password = sessionStorage.getItem("password");
        var selector = sessionStorage.getItem("selector");

        var data = {}
        data.ip = ip;
        data.port = port;
        data.database = database;
        data.username = username;
        data.password = password;
        data.selector = selector;
        var url = "/getMarkdownString";
        $.post(url, data, function (result) {
            $("#markdown-view").html('<textarea id="markdown" style="display:none;"></textarea>');
            $('#markdown').val("");
            $('#markdown').val(result);
            editormd.markdownToHTML("markdown-view", {emoji: true});
        });

    });
</script>
<script>
    editormd.markdownToHTML("markdown-view", {emoji: true});
</script>
</body>
</html>